<template>
  <detail-page
    title="打分明细详情"
    :description="headerDescription"
    :loading="config.loading"
    @close="close"
  >
    <abstract-form>
      <collapse-card header="行政打分">
        <abstract-table :data="info.administrative">
          <el-table-column
            align="center"
            label="行政政策标题"
            prop="orgAdministrativePolicy_title"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="分数"
            prop="score"
            show-overflow-tooltip
          />
        </abstract-table>
      </collapse-card>
      <collapse-card header="岗位明细打分">
        <abstract-table :data="info.postDetail">
          <el-table-column
            align="center"
            label="岗位明细标题"
            prop="orgPostDetail_title"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="岗位明细内容"
            prop="orgPostDetail_content"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="分数"
            prop="score"
            show-overflow-tooltip
          />
        </abstract-table>
      </collapse-card>
    </abstract-form>
  </detail-page>
</template>

<script>
import DetailPage from '@/views/_common/DetailPage'
import AbstractTable from '@/components/abstract/Table'
import { closeCurrentPage } from '@/utils/route'
import CollapseCard from '@/components/CollapseCard'
import AbstractForm from '@/components/abstract/Form'
import { request } from '../../../../api/request'

export default {
  name: 'NeedToScoreMark',

  components: {
    DetailPage,
    AbstractTable,
    CollapseCard,
    AbstractForm
  },

  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },

  data() {
    return {
      activeName: '0',
      info: {
        scorer_name: null,
        scorer_tel: null,
        scorer_title: null,
        user_name: null,
        user_tel: null,
        user_title: null,
        type: null,
        score: null,
        administrative: [],
        postDetail: []
      },
      form: {
        postDetail: []
      },
      config: {
        loading: false
      },
      tableData: [],
      options: [
        {
          label: '认真负责 - 2分',
          value: 0
        },
        {
          label: '细心 - 2分',
          value: 1
        }
      ]
    }
  },

  computed: {
    headerDescription() {
      return [
        {
          label: '打分人姓名：',
          content: this.info.scorer_name
        },
        {
          label: '打分人电话：',
          content: this.info.scorer_tel
        },
        {
          label: '打分人岗位：',
          content: this.info.scorer_title
        },
        {
          label: '被打分人姓名：',
          content: this.info.user_name
        },
        {
          label: '被打分人电话：',
          content: this.info.user_tel
        },
        {
          label: '被打分人岗位：',
          content: this.info.user_title
        },
        {
          label: '打分类型：',
          content: this.info.type
        },
        {
          label: '分数：',
          content: this.info.score
        }
      ]
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    //获取列表页的地址
    getTablePageUrl() {
      const url = this.$route.path
      const i = url.indexOf('/scoringDetailsDetail')
      const tablePageUrl = url.substring(0, i)
      return [...tablePageUrl].join('')
    },

    //关闭页面并跳转到列表页
    close() {
      return closeCurrentPage(this.getTablePageUrl())
    },

    init() {
      this.config.loading = true
      request(
        'company/workSum/scoringResult/scoringDetail',
        { id: this.id },
        (res) => {
          this.info = res.data
          this.postDetail
        }
      ).finally(() => {
        this.config.loading = false
      })
    },

    commit() {}
  }
}
</script>
